<template>
    <div class="row">
      <template v-for="variant in ['primary','secondary','success','outline-success','warning','danger','link']">
        <div class="col-md-4 pb-2" v-for="size in ['sm','','lg']" :key="`${variant}_${size}`">
          <b-button :size="size" :variant="variant" @click="clickMe">
            {{variant}} {{size}}
          </b-button>
        </div>
      </template>
      <div class="col-md-12">
        <b-button-group>
          <b-button>Button 1</b-button>
          <b-button>Button 2</b-button>
          <b-button>Button 3</b-button>
          <b-button>Button 4</b-button>
          <b-button>Button 5</b-button>
        </b-button-group>
        <br><br>
        <b-button-group>
          <b-button variant="success" @click="clickMe">Success</b-button>
          <b-button variant="info" @mouseover="clickMe">Info</b-button>
          <b-button variant="warning">Warning</b-button>
          <b-button variant="primary">Primary</b-button>
          <b-button variant="danger">Danger</b-button>
          <b-button variant="link">Link</b-button>
        </b-button-group>
      </div>
    </div>

</template>

<script>
  export default {
    data() {
      return {}
    },
    methods: {
      clickMe() {
        // console.log(this.$http)

        var params = new URLSearchParams();
        params.append("userId", "user1")
        this.$http.post('/api',params).then((res)=> {

        }).catch(e=>{
          console.error(e);
        });



//        this.$http({
//          method: 'post',
//          url: '/api',
//          data: {a: 1, b: 2, c: 2},
//          // params: {a: 1, b: 2, c: 2}
//        });
      }
    }
  }
</script>

<style type="text/css" rel="stylesheet" scoped>
  .row {
    margin-left: 0px !important;
  }
</style>
